<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            padding: 10px;
        }
        .parent {
            border: 3px solid black;
        }
        .div-child {
            min-height: 100px;
            border: 3px solid blue;
            margin: 10px;
        }
        .div-grandchild {
            min-height: 80px;
            border: 3px solid green;
            margin: 10px;
        }
        .target {
            border: 3px solid red!important;
        }

        div[attr-gold] {
            background: gold;
        }
        div {
            transition: all 2s;
        }

        
    
    </style>
</head>
<body>

    <!-- dom基本操作 - 获取节点-->
    <div class="parent" id="parent">
        <div class="div-child">
            previousSibling Div
        </div><div 
            id="target" class="div-child target"><div 
            class="div-grandchild" name="d-name">
                grand-child a
            </div>
            <div class="div-grandchild" name="d-grandchild-name">
                grand-child b
            </div>
            <div class="div-grandchild" name="d-grandchild-name">
                grand-child c
            </div>
            <div class="div-grandchild" name="d-grandchild-name" id="id-grand-child-d">
                grand-child d
            </div>
            target Div
        </div><div class="div-child" id="next-sibling">
            nextSibling Div
        </div>
        parent Div
    </div>
    <script>

        // Node节点类型：
        // 1	Element	代表元素	Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference
        // 2	Attr	代表属性	Text, EntityReference
        // 3	Text	代表元素或属性中的文本内容。	None
        // 4	CDATASection	代表文档中的 CDATA 部分（不会由解析器解析的文本）。	None
        // 5	EntityReference	代表实体引用。	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
        // 6	Entity	代表实体。	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
        // 7	ProcessingInstruction	代表处理指令。	None
        // 8	Comment	代表注释。	None
        // 9	Document	代表整个文档（DOM 树的根节点）。	Element, ProcessingInstruction, Comment, DocumentType
        // 10	DocumentType	向为文档定义的实体提供接口	None
        // 11	DocumentFragment	代表轻量级的 Document 对象，能够容纳文档的某个部分	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
        // 12	Notation	代表 DTD 中声明的符号。	None

        // ----------------------------------
        // getElementById()
        // var obj = document.getElementById('target')
        // console.log(obj.text)

        // getElementsByName()
        // var objs = document.getElementsByName('d-name')
        // console.log('getElementsByName', objs)

        // getElementsByTagName()
        // var obj = document.getElementById('parent')
        // var objs = obj.getElementsByTagName('div')
        // console.log(objs)

        // ELEMENT属性 - firstChild, lastChild, previousSibling, nextSibling, parentNode
        // var obj = document.getElementById('target')
        // console.log('obj', obj)
        // console.log('childNodes:', obj.childNodes)
        // console.log('firstChild:', obj.firstChild.innerText)
        // console.log('lastChild:', obj.lastChild)
        // console.log('previousSibling:', obj.previousSibling.innerText)
        // console.log('nextSibling:', obj.nextSibling.innerText)
        // console.log('parentNode:', obj.parentNode.innerText)
        
        // 创建一个节点，赋值添加Text，插入到parent节点下
        // var obj = document.getElementById('parent')
        // var newElementNode = document.createElement('div')
        // var newTextNode = document.createTextNode('New Created Node')
        // var newAttrNode = document.createAttribute('class')
        // newAttrNode.value = 'div-child'
        // newElementNode.setAttributeNode(newAttrNode) // 
        // newElementNode.setAttribute('name', 'new-name') // 
        // newElementNode.appendChild(newTextNode)
        // obj.appendChild(newElementNode)
        
        // 创建图片并插入
        // var obj = document.getElementById('parent')
        // var imageObj = document.createElement('img')
        // imageObj.setAttribute('src', 'http://www.lcrcbank.com//upload/20160819/201608191835299218.jpg')
        // imageObj.setAttribute('width', 200)
        // imageObj.setAttribute('height', 100)
        // obj.appendChild(imageObj)

        // 克隆一个节点，并插入到 #target节点之前
        // var parentObj = document.getElementById('parent')
        // var targetObj = parentObj.getElementsByTagName('div')[0]
        // var newElementNode = targetObj.cloneNode(true)
        // targetObj.parentNode.insertBefore(newElementNode, targetObj)

        // 将 grand-d 替换为 next-sibling
        // var targetObj = document.getElementById('target')
        // var objs = targetObj.getElementsByTagName('div')
        // var nextSiblingObj = document.getElementById('next-sibling')
        // var grandChildD = objs[3]
        // const ss = grandChildD.parentNode.replaceChild(nextSiblingObj, grandChildD)

        // 获取属性 设置属性, 移除属性
        // var grandChildA = document.getElementsByName('d-grandchild-name')[0]
        // // console.log('getAttribute', grandChildA.getAttribute('class'))
        // grandChildA.setAttribute('attr-gold', 'attr-gold')
        // setTimeout(() => {
        //     grandChildA.removeAttribute('attr-gold')
        // }, 3000);
        
        // 文本操作 ,首选确定是文本类型的节点
        // var grandChildA = document.getElementsByName('d-grandchild-name')[0]
        // grandChildA.firstChild.insertData(0, 'INSERT STRING')
        
        // Element.addEventListener() Element.removeEventListener()
        // var grandChildD = document.getElementById('id-grand-child-d')

        // dMouseenterFun = function (e) {
        //     console.log('mouseenter grandChild d')
        // }
        // grandChildD.addEventListener('mouseenter', dMouseenterFun)
        // //
        // const dMouseoutFun = function (e) {
        //     console.log('mouseout grandChild d')
        // }
        // grandChildD.addEventListener('mouseout', dMouseoutFun)
        
        // setTimeout(() => {
        //     grandChildD.removeEventListener('mouseout', dMouseoutFun)
        // }, 5000);
        
        // window.onload = funcRef     
        window.onload = function() { // window.onload方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法
            var el = document.getElementById('id-grand-child-d')
            console.log('window.onload', el)
        }

        // querySelector querySelectorAll 选择DOM节点
        // document.querySelector(css选择器) document.querySelectorAll(css选择器)
        // console.log(document.querySelector('.div-grandchild'))
        // console.log(document.querySelectorAll('.div-grandchild'))
    </script>
</body>
</html>
